---
title: "Flex Direction"
# description: "Utilities for controlling the direction of flex items."
description: "控制 Flex 子项的方向的功能类"
features:
  responsive: true
  customizable: false
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/flexDirection'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

<!-- ## Row -->
## 横向

<!-- Use `flex-row` to position flex items horizontally in the same direction as text: -->
使用 `flex-row` 用来沿与文本相同的方向水平放置 flex 子项。

```html amber
<template preview class="p-4">
  <div class="flex flex-row space-x-4">
    <div class="w-16 h-16 rounded-md bg-amber-500 text-white flex items-center justify-center text-2xl font-extrabold">1</div>
    <div class="w-16 h-16 rounded-md bg-amber-500 text-white flex items-center justify-center text-2xl font-extrabold">2</div>
    <div class="w-16 h-16 rounded-md bg-amber-500 text-white flex items-center justify-center text-2xl font-extrabold">3</div>
  </div>
</template>

<div class="flex **flex-row** ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```

<!-- ## Row reversed -->
## 横向反向

<!-- Use `flex-row-reverse` to position flex items horizontally in the opposite direction: -->
使用 `flex-row` 用来沿与文本相反的方向水平放置 flex 子项。

```html lightBlue
<template preview class="p-4">
  <div class="flex flex-row-reverse space-x-reverse space-x-4">
    <div class="w-16 h-16 rounded-md bg-light-blue-500 text-white flex items-center justify-center text-2xl font-extrabold">1</div>
    <div class="w-16 h-16 rounded-md bg-light-blue-500 text-white flex items-center justify-center text-2xl font-extrabold">2</div>
    <div class="w-16 h-16 rounded-md bg-light-blue-500 text-white flex items-center justify-center text-2xl font-extrabold">3</div>
  </div>
</template>

<div class="flex **flex-row-reverse** ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```

<!-- ## Column -->
## 纵向

<!-- Use `flex-col` to position flex items vertically: -->
使用 `flex-col` 用来沿垂直方向放置 flex 子项。

```html emerald
<template preview class="p-4">
  <div class="flex flex-col space-y-4">
    <div class="h-16 rounded-md bg-emerald-500 text-white flex items-center justify-center text-2xl font-extrabold">1</div>
    <div class="h-16 rounded-md bg-emerald-500 text-white flex items-center justify-center text-2xl font-extrabold">2</div>
    <div class="h-16 rounded-md bg-emerald-500 text-white flex items-center justify-center text-2xl font-extrabold">3</div>
  </div>
</template>

<div class="flex **flex-col** ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```

<!-- ## Column reversed -->
## 纵向反向

<!-- Use `flex-col-reverse` to position flex items vertically in the opposite direction: -->
使用 `flex-col-reverse` 用来沿垂直方向反向放置 flex 子项。

```html rose
<template preview class="p-4">
  <div class="flex flex-col-reverse space-y-reverse space-y-4">
    <div class="h-16 rounded-md bg-rose-500 text-white flex items-center justify-center text-2xl font-extrabold">1</div>
    <div class="h-16 rounded-md bg-rose-500 text-white flex items-center justify-center text-2xl font-extrabold">2</div>
    <div class="h-16 rounded-md bg-rose-500 text-white flex items-center justify-center text-2xl font-extrabold">3</div>
  </div>
</template>

<div class="flex **flex-col-reverse** ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```

<!-- ## Responsive -->
## 响应式

<!-- To apply a flex direction utility only at a specific breakpoint, add a `{screen}:` prefix to the existing class name. For example, adding the class `md:flex-row` to an element would apply the `flex-row` utility at medium screen sizes and above. -->
要仅在特定的断点处应用 flex direction 功能类，请在现有的类名称上添加 `{screen}:` 前缀。例如，将类 `md:flex-row` 添加到元素上，将在中等尺寸及以上的屏幕上应用 `flex-row` 功能类。

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
有关 Tailwind 的响应式设计功能的更多信息，查看 [响应式设计](/docs/responsive-design) 文档。

```html
  <div class="flex flex-col **md:flex-row** ...">
    <!-- ... -->
  </div>
```

## 定制

### 变体

<Variants plugin="flexDirection" name="flex-direction" />

### 禁用

<Disabling plugin="flexDirection" name="flex-direction" />
